import { Avatar, Menu } from 'antd';
import _, { values } from 'lodash';
import React, { useEffect, useState } from 'react'
import style from './index.module.scss'
import  LikeOrFavorite from './LikeOrFavorite';
import Translation from './Translation';
import  Attention from './Attention';
import { connect } from 'react-redux';
import { updateMessageNumberApi } from '@/common/api';
import useSocketHook from '@/components/ComponentHook/UseSocketHook';

function Message(props) {
   const {message:{likeAndCollectionNumber,attentionNumber,reviewNumber},addMessage} = props
  const [collapsed, setCollapsed] = useState(false);
  const [itemKey, setKey] = useState('1')
  const {_id} = useSocketHook()
  const items = [
    {
      key: '1',
      label: <div className='messageTitle'>评论{reviewNumber!==0&&<i className='messageNumber'>{reviewNumber>100?'99+':reviewNumber}</i>}</div>,
    },
    {
      key: '2',
      label: <div className='messageTitle'>赞和收藏{likeAndCollectionNumber!==0&&<i className='messageNumber'>{likeAndCollectionNumber>100?'99+':likeAndCollectionNumber}</i>}</div>,
    },
    {
      key: '3',
      label: <div className='messageTitle'>新增关注{attentionNumber!==0&&<i className='messageNumber'>{attentionNumber>100?'99+':attentionNumber}</i>}</div>,
    },
  ]
  useEffect(() => {
    titleChange(itemKey)
  },[itemKey])
  const titleChange = async (key) => {
    let type=""
    if (key === '1') {
      type="reviewNumber"
    } else if (key === "2") {
      type="likeAndCollectionNumber"
    } else if (key === "3") {
      type="attentionNumber"
    }
    const RES = await updateMessageNumberApi({authorId:_id,type})
    if (RES.code === 200) {
      addMessage({type: "addMessage", payload: _.get(RES, 'data')})
    }
  }
  return (
    <>
      <div className={style.messageMenu}>
        <Menu
          defaultSelectedKeys={['1']}
          mode="inline"
          items={items}
          onSelect={(values)=>setKey(values.key)}
        />
        <div className={style.text}>
         {itemKey==='1'&&<Translation/>}
         {itemKey==='2'&&<LikeOrFavorite/>}
         {itemKey==='3'&&<Attention/>}
        </div>
      </div>
    </>
  )
}
export default connect(
  state => {
    return {
        message:state.message.messageNumber
    }
  },
  dispatch => {
    return {  
        addMessage: (value) => dispatch(value),
    }
}
)(Message)